<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="text-align: center;">
    <div id="vm">
        <h3>
            {{mes}}
            <br> {{mes1}}
            <br> {{data}}
            <br>{{data1}}
        </h3>
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 引入Vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 我们的数据对象
    var data = {
        a: 1
    };
    //这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，
    //也意味着响应系统无法再追踪变化。
    var obj = {
        foo: 'bar'
    };
    Object.freeze(obj);
    var vm = new Vue({
        el: '#vm',
        data: {
            mes: "Hello World this is Tutorials ",
            mes1: "当一个 Vue 实例被创建时，它将 data 对象中的所有的 property" +
                "加入到 Vue 的响应式系统中。  当这些 property 的值发生改变时， 视图将会产生“ 响应”， 即匹配更新为新的值。 ",
            data: data,
            data1: obj
        },
        created: function() {
            // `this` 指向 vm 实例
            console.log('a is: ' + this.data.a);
        }

    });
    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    if (vm.data.a == data.a) {
        console.log("Ture");
    }
    // 设置 property 也会影响到原始数据
    vm.data.a = 2
    data.a // => 2
        // ……反之亦然
    data.a = 3
    vm.data.a // => 3
    obj.foo = 'cs'; //改了没有反应这个函数可以用于常量 比如进入网页的时间等特殊值
</script>

</html>